<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记录 - 她与月亮的约定</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#A06CD5',
                        'primary-light': '#F0EAF6',
                        secondary: '#6CD5A0',
                        'text-primary': '#1A0D28',
                        'text-secondary': '#5A5165',
                        'text-tertiary': '#9D96A5',
                        'bg-page': '#F7F5F9',
                        'border-color': '#E8E2EE',
                    }
                }
            }
        }
    </script>
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #F7F5F9;
            color: #1A0D28;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .option-item {
            transition: all 0.2s ease;
        }
        
        .option-item.selected {
            background-color: #F0EAF6;
            border-color: #A06CD5;
            color: #A06CD5;
        }
        
        .bottom-nav {
            box-shadow: 0 -1px 10px rgba(0,0,0,0.05);
        }
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="flex justify-between items-center px-5 py-3 bg-white border-b border-border-color">
        <span class="text-lg font-medium text-text-primary">记录今天</span>
        <div class="flex items-center space-x-2">
            <svg class="w-5 h-5 text-text-secondary" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
            </svg>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="flex-1 overflow-auto px-4 pb-20">
        <!-- 月经流量选择 -->
        <div class="bg-white rounded-2xl p-4 mt-4 shadow-sm">
            <div class="mb-3">
                <h4 class="text-base font-medium">月经流量</h4>
            </div>
            <div class="grid grid-cols-4 gap-3">
                <div class="option-item border border-border-color rounded-xl p-3 text-center cursor-pointer">
                    <div class="text-2xl mb-1">💧</div>
                    <div class="text-xs text-text-secondary">点滴</div>
                </div>
                <div class="option-item selected border border-border-color rounded-xl p-3 text-center cursor-pointer">
                    <div class="text-2xl mb-1">🩸</div>
                    <div class="text-xs">少量</div>
                </div>
                <div class="option-item border border-border-color rounded-xl p-3 text-center cursor-pointer">
                    <div class="text-2xl mb-1">🩸🩸</div>
                    <div class="text-xs text-text-secondary">中量</div>
                </div>
                <div class="option-item border border-border-color rounded-xl p-3 text-center cursor-pointer">
                    <div class="text-2xl mb-1">🩸🩸🩸</div>
                    <div class="text-xs text-text-secondary">大量</div>
                </div>
            </div>
        </div>

        <!-- 身体症状选择 -->
        <div class="bg-white rounded-2xl p-4 mt-4 shadow-sm">
            <div class="mb-3">
                <h4 class="text-base font-medium">身体症状</h4>
            </div>
            <div class="grid grid-cols-4 gap-3">
                <div class="option-item selected border border-border-color rounded-xl p-3 text-center cursor-pointer">
                    <div class="text-2xl mb-1">😩</div>
                    <div class="text-xs">腹痛</div>
                </div>
                <div class="option-item border border-border-color rounded-xl p-3 text-center cursor-pointer">
                    <div class="text-2xl mb-1">🤕</div>
                    <div class="text-xs text-text-secondary">头痛</div>
                </div>
                <div class="option-item border border-border-color rounded-xl p-3 text-center cursor-pointer">
                    <div class="text-2xl mb-1">😊</div>
                    <div class="text-xs text-text-secondary">无症状</div>
                </div>
                <div class="option-item border border-border-color rounded-xl p-3 text-center cursor-pointer">
                    <div class="text-2xl mb-1">🍈</div>
                    <div class="text-xs text-text-secondary">胸部胀痛</div>
                </div>
                <div class="option-item selected border border-border-color rounded-xl p-3 text-center cursor-pointer">
                    <div class="text-2xl mb-1">😴</div>
                    <div class="text-xs">嗜睡</div>
                </div>
                <div class="option-item border border-border-color rounded-xl p-3 text-center cursor-pointer">
                    <div class="text-2xl mb-1">😢</div>
                    <div class="text-xs text-text-secondary">腰酸</div>
                </div>
                <div class="option-item border border-border-color rounded-xl p-3 text-center cursor-pointer">
                    <div class="text-2xl mb-1">🌡️</div>
                    <div class="text-xs text-text-secondary">体温升高</div>
                </div>
                <div class="option-item border border-border-color rounded-xl p-3 text-center cursor-pointer">
                    <div class="text-2xl mb-1">➕</div>
                    <div class="text-xs text-text-secondary">更多</div>
                </div>
            </div>
        </div>

        <!-- 心情选择 -->
        <div class="bg-white rounded-2xl p-4 mt-4 shadow-sm">
            <div class="mb-3">
                <h4 class="text-base font-medium">心情</h4>
            </div>
            <div class="grid grid-cols-4 gap-3">
                <div class="option-item selected border border-border-color rounded-xl p-3 text-center cursor-pointer">
                    <div class="text-2xl mb-1">😊</div>
                    <div class="text-xs">开心</div>
                </div>
                <div class="option-item border border-border-color rounded-xl p-3 text-center cursor-pointer">
                    <div class="text-2xl mb-1">😌</div>
                    <div class="text-xs text-text-secondary">平静</div>
                </div>
                <div class="option-item border border-border-color rounded-xl p-3 text-center cursor-pointer">
                    <div class="text-2xl mb-1">😠</div>
                    <div class="text-xs text-text-secondary">烦躁</div>
                </div>
                <div class="option-item border border-border-color rounded-xl p-3 text-center cursor-pointer">
                    <div class="text-2xl mb-1">😭</div>
                    <div class="text-xs text-text-secondary">难过</div>
                </div>
            </div>
        </div>

        <!-- 备注输入 -->
        <div class="bg-white rounded-2xl p-4 mt-4 shadow-sm">
            <div class="mb-3">
                <h4 class="text-base font-medium">备注</h4>
            </div>
            <textarea 
                class="w-full h-24 bg-bg-page border border-border-color rounded-xl p-3 text-sm text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                placeholder="记录下特别的感受..."
            ></textarea>
        </div>

        <!-- 保存按钮 -->
        <div class="mt-6 mb-4 px-2">
            <button class="w-full bg-primary hover:bg-opacity-90 text-white py-3 rounded-xl font-medium shadow-md transition">
                保存记录
            </button>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="bottom-nav fixed bottom-0 left-0 right-0 bg-white border-t border-border-color py-2 px-6">
        <div class="flex justify-around">
            <a href="#" class="flex flex-col items-center text-text-tertiary">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
                </svg>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="#" class="flex flex-col items-center text-primary">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
                </svg>
                <span class="text-xs mt-1">记录</span>
            </a>
            <a href="#" class="flex flex-col items-center text-text-tertiary">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"></path>
                </svg>
                <span class="text-xs mt-1">知识</span>
            </a>
            <a href="#" class="flex flex-col items-center text-text-tertiary">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                </svg>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </div>
</body>
</html> 